<template>
  <el-dialog
    title="订单发货"
    :append-to-body="true"
    :visible.sync="deliveryVisible"
    width="30%"
    @open="open"
    :before-close="hidden"
  >
    <el-form v-if="!all" ref="form" :model="form" label-width="80px">
      <el-form-item label="快递公司">
        <!-- <el-cascader
          placeholder="试试输入：顺。"
          :value="[form.expressType]"
          @change="classChange"
          :options="deliveryClass"
          clearable
          filterable
        ></el-cascader> -->
        <el-input v-model="form.express_company"></el-input>
      </el-form-item>
      <el-form-item label="物流单号">
        <el-input v-model="form.express_no"></el-input>
      </el-form-item>
    </el-form>
    <div v-else style="with: 100%; text-align: center">
      <!-- <el-upload
        class="upload-demo"
        limit="1"
        :auto-upload="false"
        :on-change="handleChange"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload> -->
      <input type="file" ref="file" @change="getFile" />
      <p>注：只能上传xlsx或xls格式文档</p>
      <div style="margin-top: 30px">
        <p>点击下方按钮下载查看批量上传文档模板：</p>
        <el-button type="primary" size="small" @click="chakan"
          >下载查看文档格式</el-button
        >
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="hidden">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import axios from "axios";
export default {
  props: {
    deliveryVisible: "",
    orderID: "",
    all: false,
  },
  data() {
    return {
      form: {},
      deliveryClass: [],
      file: "",
    };
  },
  methods: {
    chakan() {
      const elink = document.createElement("a");
      elink.style.display = "none";
      elink.href = "http://pindev.lktehui.com/download/multipleDelivery.xlsx";
      document.body.appendChild(elink);
      console.log(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    },
    open() {
      this.form.orderID = this.orderID;
      // this.deliveryClassGetlist();
    },
    getFile() {
      let target = event.target.files;
      var name = target[0].name;
      var fileName = name.substring(name.lastIndexOf(".") + 1).toLowerCase();
      if (fileName != "xlsx" && fileName != "xls") {
        alert("请选择文件格式上传(只能后缀名为xls,xlsx的文件)！");
        this.$refs.file.value = "";
        return false; //阻止submit提交
      }
      this.file = event.target.files;
    },
    onSubmit() {
      if (!this.all) {
        axios.post("Order/setDelivery", this.form).then((response) => {
          if (response.data.code === 1) {
            this.$message({
              message: response.data.msg,
              type: "success",
              offset: 100,
            });
            this.hidden();
          } else {
            this.$message({
              message: response.data.msg,
              type: "warning",
              offset: 100,
            });
          }
        });
      } else {
        const formData = new FormData();
        formData.append("file", this.file[0]);
        axios({
          method: "post",
          url: "Order/multipleDelivery",
          data: formData,
        }).then((response) => {
          if (response.data.code === 1) {
            this.$message({
              message: response.data.msg,
              type: "success",
              offset: 100,
            });
            this.$refs.file.value = "";
            this.hidden();
          } else {
            this.$message({
              message: response.data.msg,
              type: "warning",
              offset: 100,
            });
          }
        });
      }
    },
    classChange(arr) {
      this.form.expressType = arr[arr.length - 1];
    },
    deliveryClassGetlist() {
      axios
        .post("index/getExpress", {
          page: 1,
          size: 10000,
        })
        .then((response) => {
          let res = response.data;
          if (res.code === 1) {
            for (let i = 0; i < res.data.list.length; i++) {
              this.deliveryClass.push({
                value: res.data.list[i].LogisticCode,
                label: res.data.list[i].ShipperCode,
              });
            }
          } else {
            if (res.code === -14) {
              this.$store.commit("logout", this);
              this.$router.push({
                name: "login",
              });
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          }
        });
    },
    hidden() {
      this.form = {};
      this.deliveryClass = [];
      this.$emit("hidden");
    },
  },
};
</script>

<style>
</style>